layui.use(['layer', 'table', 'form', 'laydate'], function(){
    var layer = layui.layer //弹层
        , table = layui.table //表格
        , form = layui.form
        , laydate = layui.laydate;

    var tableName = table.render({
        elem: '#demo'
        ,height: 500
        ,url: '/tester/selectAll' //数据接口
        ,page: true //开启分页
        ,toolbar: '#navBar'
        ,limit:10
        ,limits:[5,10,15,20,25,30,50,100]
        ,autoSort:false
        ,cols: [
            [ //表头
                {type: 'checkbox', fixed: 'left'}
                ,{field: 'testerId', title: 'ID', width:80, sort: true, fixed: 'left'}
                ,{field: 'testerName', title: '用户名'}
                ,{field: 'testerPhone', title: '手机号'}
                ,{field: 'testTime', title: '测试时间'}
                ,{fixed: 'right',title: '操作', align: 'center', toolbar: '#barDemo'}
            ]
        ]
    });
    form.render('select', 'formDemo');
    table.on('toolbar(test)', function (obj) {
        switch (obj.event){
            case 'add':
                //加载下拉框内容
                form.render('select', 'formDemo');
                layer.open({
                    type: 1,
                    area: ['500px', '600px'],
                    title: '添加数据',
                    content: $("#add"),
                    shade: 0,
                    btn: ['确定', '取消'],
                    success: function (data) {
                        $("#add")[0].reset();
                        form.render();
                    },
                    btn1: function (index, layer0) {
                        var jsonData = {testerName: $("#testerName").val(),
                            testerPhone: $("#testerPhone").val()
                        };
                        $.ajax({
                            url:"/tester/insert",
                            data:JSON.stringify(jsonData),
                            type:"post",
                            success:function (data) {
                                //成功后的回调函数
                                if (data.code == 0) {
                                    layer.msg('增加成功');
                                    layer.close(index);
                                    table.reload('demo', {
                                        page: {
                                            curr: tableName.config.page.pages
                                        }
                                    })
                                    $("#add")[0].reset();
                                    form.render();
                                }else{
                                    layer.msg('增加失败');
                                    layer.close(index);
                                    table.reload('demo', {
                                        page: {
                                            curr: tableName.config.page.curr
                                        }
                                    });
                                }
                            },
                            dataType:"json",
                            contentType: 'application/json;charset=UTF-8'
                        });
                        $("#add").css("display", "none");
                    },
                    btn2: function () {
                        $("#add").css("display", "none");
                    },
                    cancel: function (layer0, index) {
                        $("#add").css("display", "none");
                        layer.closeAll();
                    }
                });
                break;
            case 'del':
                layer.confirm('真的删除么', function (index) {
                    var checkStatus = table.checkStatus(obj.config.id);
                    if(checkStatus.data.length != 0){

                        let arr = [];
                        for (let i=0;i<checkStatus.data.length;i++){
                            arr.push(checkStatus.data[i].testerId);
                        }
                        $.ajax({
                            url:"/tester/delete",
                            data: {id: arr.join(',')},
                            type:"delete",
                            success:function (result) {
                                //成功后的回调函数
                                if (result.code == 0) {
                                    layer.msg('删除成功');
                                }else {
                                    layer.msg('删除失败');
                                }
                                layer.close(index);
                                table.reload('demo', {
                                    page: {
                                        curr: tableName.config.page.curr
                                    }
                                })
                            }
                        });
                    }

                });
                break;
        }
    });

    //修改和删除
    table.on('tool(test)', function (obj) {
        var data = obj.data, layEvent = obj.event;
        if (layEvent === 'edit') {
            layer.open({
                type: 1,
                area: ['500px', '600px'],
                title: '修改数据',
                content: $("#add"),
                shade: 0,
                btn: ['确定', '取消'],
                success: function (layer0, index) {
                    form.render();
                    $("#testerId").val(data.testerId)
                    $("#testerName").val(data.testerName);
                    $("#testerPhone").val(data.testerPhone);
                    $("#testTime").val(data.testTime);
                },
                btn1: function (index, layer0) {
                    var jd = {
                        testerId: $("#testerId").val(),
                        testerName: $("#testerName").val(),
                        testerPhone: $("#testerPhone").val(),
                        testTime: $("#testTime").val()
                    };
                    $.ajax({
                        url:"/tester/update",
                        data:JSON.stringify(jd),
                        type:"put",
                        success:function (data) {
                            //成功后的回调函数
                            if (data.code == 0) {
                                layer.msg('修改成功');
                            }else{
                                layer.msg('修改失败');
                            }
                            layer.close(index);
                            table.reload('demo', {
                                page: {
                                    curr: tableName.config.page.curr
                                }
                            });
                        },
                        dataType:"json",
                        contentType: 'application/json;charset=UTF-8'
                    });
                    $("#add").css("display", "none");
                },
                btn2: function () {
                    $("#add").css("display", "none");
                },
                cancel: function (layer0, index) {
                    $("#add").css("display", "none");
                    layer.closeAll();
                }
            });
        } else if (layEvent === 'del') {
            layer.confirm('真的删除么', function (index) {
                $.ajax({
                    url:"/tester/delete",
                    data: {id: data.testerId},
                    type:"delete",
                    success:function (result) {
                        //成功后的回调函数
                        if (result.code == 0) {
                            obj.del(); //删除对应行（tr）的DOM结构
                            layer.msg('删除成功');
                        }else {
                            layer.msg('删除失败');
                        }
                        layer.close(index);
                        table.reload('demo', {
                            page: {
                                curr: tableName.config.page.curr
                            }
                        })
                    }
                });
            })
        }
    })

    //监听排序事件
    table.on('sort(test)', function(obj){ //注：sort 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
        console.log(obj.field); //当前排序的字段名
        console.log(obj.type); //当前排序类型：desc（降序）、asc（升序）、null（空对象，默认排序）
        console.log(this); //当前排序的 th 对象

        //尽管我们的 table 自带排序功能，但并没有请求服务端。
        //有些时候，你可能需要根据当前排序的字段，重新向服务端发送请求，从而实现服务端排序，如：
        table.reload('demo', {
            initSort: obj //记录初始排序，如果不设的话，将无法标记表头的排序状态。
            ,where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
                field: obj.field //排序字段
                ,order: obj.type //排序方式
            }
        });

        //layer.msg('服务端排序。order by '+ obj.field + ' ' + obj.type);
    });

});